<!-- 左侧菜单页 -->
<template>
  <div class="diagram-sidebar">
    <div>
      <h1 class="node-category-title">{{ taskTitle }}<div class="nodeBtn"><i class="el-icon-edit"></i><i
            class="el-icon-delete"></i><i class="el-icon-plus"></i></div>
      </h1>
      <div class="node-category">
        <el-menu default-active="1" :default-openeds="['1']" class="el-menu-vertical-demo" @select="handleSelect"
          @open="handleOpen" @close="handleClose">
          <el-submenu :index="String(index + 1)" v-for="(item, index) in menuList" :key="index">
            <template slot="title">
              <span>{{ item.title }}</span>
            </template>

            <!-- 第二层菜单 -->
            <div v-for="(child, idx) in item.children" :key="idx">
              <!-- 判断是否还有第三层 -->
              <el-menu-item v-if="!child.children || child.children.length === 0" :index="child.id + '_' + String(idx + 1)">
                {{ child.title }}
              </el-menu-item>

              <el-submenu v-else :index="child.id">
                <div class="nodeBtn sslNodeBtn"><i class="el-icon-edit"></i><i class="el-icon-delete"></i><i
                    class="el-icon-plus"></i></div>
                <template slot="title" class="ssl">{{ child.title }}</template>
                <!-- 第三层菜单 -->
                <el-menu-item v-for="(grandChild, gIdx) in child.children" :key="gIdx" :index="grandChild.id">
                  {{ grandChild.title }}
                </el-menu-item>
              </el-submenu>
            </div>
          </el-submenu>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>

import { UUID } from '@/assets/js/uuid.js'
export default {
  name: 'DiagramSidebar',
  data() {
    return {
      taskTitle: 'YL任务列',
      menuList: [
        {
          title: '2034xxx',
          taskName: '2034xxx',
          children: [
            {
              title: '力量构成',
            },
            {
              title: 'ZH架构',
            },
            {
              title: 'XSL',
              children: [
                {
                  title: 'XSL1'
                },
                {
                  title: 'XSL2'
                }
              ]
            },
            {
              title: '数据采集表'
            }
          ]
        },
        {
          title: '2035xxx',
          taskName: '2035xxx',
          children: [
            {
              title: '力量构成',
            },
            {
              title: 'ZH架构',
            },
            {
              title: 'XSL',
              children: [
                {
                  title: 'XSL1'
                },
                {
                  title: 'XSL2'
                }
              ]
            },
            {
              title: '数据采集表'
            }
          ]
        }
      ]
    }
  },
  created() {
    this.renderMenu()
  },
  mounted() {
  },
  methods: {
    dragInNode(type) {
      this.$emit('dragInNode', type)
    },
    // 菜单展开
    /* eslint-disable no-unused-vars */
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 菜单收起
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 菜单选择
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      //key包含 4
      let state = key.split('_')[key.split('_').length - 1];

      let routeName = state === '4' ? 'DataCollect' : 'Diagram';

      // 提交状态到 Vuex
      this.$store.dispatch('setStatus', state === '4' ? key : '');

      // 判断是否是当前路由，避免 NavigationDuplicated
      if (this.$route.name === routeName && this.$route.params.id === key) {
        // 当前已经是这个路由且参数也一样，直接调用刷新数据的方法
        //this.loadData(key); // 👈 假设你在组件中定义了 loadData 方法
      } else {
        // 路由不同或参数不同，执行 push
        this.$router.push({
          name: routeName,
          params: { id: key }
        }).catch(err => {
          // 忽略 NavigationDuplicated 错误
          if (err.name !== 'NavigationDuplicated') {
            console.error(err);
          }
        });
      }
      let taskName = this.findTaskNameById(this.menuList, key.split('_')[0]);
      this.$store.dispatch('setNodeStatus',taskName);
    },
    /* eslint-disable no-unused-vars */
    //菜单生成唯一id
    addUuidToMenu(menu, topTaskName = null) {
      return menu.map(item => {
        // 如果当前是顶级节点，记录 taskName
        const currentTopTaskName = item.taskName !== undefined ? item.taskName : topTaskName;
        const node = {
          ...item,
          id: UUID.generate(),
          taskName: currentTopTaskName // 设置 taskName 为最顶层的 taskName;
        }
        if (node.children) {
          node.children = this.addUuidToMenu(node.children, currentTopTaskName);
        }
        return node;
      });
    },
    // 根据id查找taskName
    findTaskNameById(menu, id) {
      // 遍历每个菜单项
      for (const item of menu) {
        if (item.id === id) {
          // 如果找到了对应的id，直接返回taskName
          return item.taskName;
        }
        // 如果当前项有子节点，递归查找
        if (item.children) {
          const taskName = this.findTaskNameById(item.children, id);
          if (taskName) {
            // 如果在子节点中找到了对应的id，返回其taskName
            return taskName;
          }
        }
      }
      // 如果没有找到，返回null或者其它提示信息
      return null;
    },
    //渲染菜单
    renderMenu() {
      let menuWithUuid = this.addUuidToMenu(this.menuList);
      // console.log(menuWithUuid)
      this.menuList = menuWithUuid;
    },


  },
  components: {

  }
}
</script>

<style scoped>
.diagram-sidebar {
  user-select: none;
}

.node-category {
  padding: 10px;
}

.node-category-title {
  margin: 0;
  font-size: 14px;
  display: block;
  border-bottom: 1px solid #e5e5e5;
  line-height: 30px;
  margin-bottom: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.nodeBtn i {
  margin-right: 10px;
  cursor: pointer;
}

.nodeBtn i:hover {
  color: var(--btn-hover);
}

.nodeBtn i:active {
  color: var(--btn-active);
}
</style>